<template>
    <div class="breadcrumb-bar">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-12">
                    <div class="breadcrumb-list">
                        <nav aria-label="breadcrumb" class="page-breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">
                                    <nuxt-link to="/admin">首页</nuxt-link>
                                </li>

                                <li class="breadcrumb-item" aria-current="page">
                                    <nuxt-link to="/admin/custom">我的客户</nuxt-link>

                                </li>
                                <li class="breadcrumb-item" aria-current="page">{{ originTitle }}</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="settings-widget">
        <div class="settings-inner-blk p-0">
            <div class="comman-space pb-0">
                <div class="filter-grp ticket-grp d-flex align-items-center justify-content-between">
                    <div>
                        <h3>非凡编程</h3>
                        <div class="rating-img d-flex align-items-center" style="padding: 10px 0px">
                            <img src="assets/img/icon/icon-01.svg" alt="">
                            <p>已开通：12个课程</p>

                            <img src="assets/img/icon/icon-02.svg" alt="">
                            <p>9位教师</p>
                            <img src="assets/img/icon/icon-02.svg" alt="">
                            <p>129名学生</p>
                        </div>
                    </div>
                </div>

                <div class="category-tab tickets-tab-blk">
                    <ul class="nav nav-justified">
                        <li v-for="item in tabs" :key="item.id" class="nav-item" @click="curTab = item.id">
                            <a href="javaScript:void(0);" class="nav-link" :class="{ 'active': curTab == item.id }">{{
                                item.name }}</a>
                        </li>
                    </ul>
                </div>

                <div class="settings-inner-blk p-1" v-show="curTab == 'baseInfo'">
                    <div class="row">
                        <form action="#" class="col-lg-6 checkout-form">
                            <div class="form-group">
                                <label class="form-control-label">客户名称</label>
                                <input type="text" v-model="formData.title" class="form-control" placeholder="请输入用户名">
                            </div>
                            <div class="form-group">
                                <label class="form-control-label">负责人姓名（校长）</label>
                                <input type="text" v-model="principal.name" class="form-control" placeholder="请输入用户名">
                            </div>
                            <div class="form-group">
                                <label class="form-control-label">负责人手机</label>
                                <input type="text" v-model="principal.telephone" class="form-control" placeholder="请输入用户名">
                            </div>
                            <div class="form-group">
                                <label class="form-control-label">地区</label>
                                <input type="text" v-model="formData.area" class="form-control" placeholder="用于登录">
                            </div>
                            <div class="form-group">
                                <label class="form-control-label">类型</label>

                                <div class="wallet-method">
                                    <label class="radio-inline custom_radio me-4">
                                        <input type="radio" name="optradio" v-model="formData.type" value="training">
                                        <span class="checkmark"></span> 培训结构
                                    </label>
                                    <label class="radio-inline custom_radio me-4">
                                        <input type="radio" name="optradio" v-model="formData.type" value="school">
                                        <span class="checkmark"></span> 学校
                                    </label>
                                    <label class="radio-inline custom_radio">
                                        <input type="radio" name="optradio" v-model="formData.type" value="studio">
                                        <span class="checkmark"></span> 个人工作室
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="form-control-label">有效期</label>
                                <input type="text" class="form-control" v-model="formData.endAt" placeholder="有效期">
                            </div>
                            <div class="form-group">
                                <label class="form-control-label">简介</label>
                                <textarea rows="5" v-model="formData.info" class="form-control" >

                                </textarea>
                            </div>

                            <div class="form-group">
                                <button type="button" @click="save" class="btn btn-primary">确认</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="settings-inner-blk p-1" v-show="curTab == 'courseInfo'">
                <div class="row">

                    <div v-for="i in 10" :key="i" class="col-lg-3 col-md-4 d-flex">
                        <div class="course-box course-design d-flex ">
                            <div class="product">
                                <div class="product-img">
                                    <img class="img-fluid" alt="" src="assets/img/course/course-10.jpg">
                                </div>
                                <div class="product-content">
                                    <h3 class="title">蓝桥集训班</h3>
                                    <div class="d-flex align-items-center">
                                        <div class="rating-img d-flex align-items-center">
                                            <img src="assets/img/icon/icon-01.svg" alt="">
                                            <span>12个课时</span>
                                        </div>
                                        <div class="course-view d-flex align-items-center">
                                            <div class="all-btn all-category d-flex align-items-center">
                                                <nuxt-link to="/teacher/class-course-detail?id=1"
                                                    class="btn btn-primary">
                                                    进入课程
                                                </nuxt-link>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="settings-inner-blk p-1" v-show="curTab == 'teacherInfo'">
                <div class="row">
                    <div class="settings-referral-blk table-responsive">
                        <table class="table table-nowrap mb-4">
                            <thead>
                                <tr>
                                    <th>学生姓名</th>
                                    <th>学生ID</th>
                                    <th>手机号</th>
                                    <th>登录密码</th>
                                    <th>性别</th>
                                    <th>年龄</th>
                                    <th class="text-center">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <nuxt-link class="refer-avatar-blk d-flex align-items-center"
                                            to="/teacher/student-detail?id=1">
                                            <img src="assets/img/students/refer-img1.png" class="rounded-circle me-2"
                                                alt="Referred User Info">
                                            <span>Guy Hawkins</span>
                                        </nuxt-link>
                                    </td>
                                    <td>09341</td>
                                    <td>13812345678</td>
                                    <td>123456</td>
                                    <td>男</td>
                                    <td>10</td>
                                    <td class="text-center">
                                        <!-- <a href="javascript:;" class="btn-style">
                                                <i class="feather-clipboard"></i></a>
                                            
                                                <a href="javascript:;" class="btn-style">
                                                <i class="feather-clipboard"></i></a>
                                                <a href="javascript:;" class="btn-style">
                                                <i class="feather-clipboard"></i></a> -->
                                        <span>重置密码</span> &nbsp;
                                        <span>换班</span>&nbsp;
                                        <span>删除</span>&nbsp;
                                    </td>

                                </tr>

                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
            <div class="settings-inner-blk p-1" v-show="curTab == 'studentInfo'">
                <div>
                    <div class="settings-referral-blk table-responsive">
                        <table class="table table-nowrap mb-4">
                            <thead>
                                <tr>
                                    <th>学生姓名</th>
                                    <th>学生ID</th>
                                    <th>手机号</th>
                                    <th>登录密码</th>
                                    <th>性别</th>
                                    <th>年龄</th>
                                    <th class="text-center">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <nuxt-link class="refer-avatar-blk d-flex align-items-center"
                                            to="/teacher/student-detail?id=1">
                                            <img src="assets/img/students/refer-img1.png" class="rounded-circle me-2"
                                                alt="Referred User Info">
                                            <span>Guy Hawkins</span>
                                        </nuxt-link>
                                    </td>
                                    <td>09341</td>
                                    <td>13812345678</td>
                                    <td>123456</td>
                                    <td>男</td>
                                    <td>10</td>
                                    <td class="text-center">
                                        <!-- <a href="javascript:;" class="btn-style">
                                                <i class="feather-clipboard"></i></a>
                                            
                                                <a href="javascript:;" class="btn-style">
                                                <i class="feather-clipboard"></i></a>
                                                <a href="javascript:;" class="btn-style">
                                                <i class="feather-clipboard"></i></a> -->
                                        <span>重置密码</span> &nbsp;
                                        <span>换班</span>&nbsp;
                                        <span>删除</span>&nbsp;
                                    </td>

                                </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="settings-inner-blk p-1" v-show="curTab == 'orderInfo'">
                <div>
                    <div class="settings-referral-blk table-responsive">
                        <table class="table table-nowrap mb-4">
                            <thead>
                                <tr>
                                    <th>学生姓名</th>
                                    <th>学生ID</th>
                                    <th>手机号</th>
                                    <th>登录密码</th>
                                    <th>性别</th>
                                    <th>年龄</th>
                                    <th class="text-center">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <nuxt-link class="refer-avatar-blk d-flex align-items-center"
                                            to="/teacher/student-detail?id=1">
                                            <img src="assets/img/students/refer-img1.png" class="rounded-circle me-2"
                                                alt="Referred User Info">
                                            <span>Guy Hawkins</span>
                                        </nuxt-link>
                                    </td>
                                    <td>09341</td>
                                    <td>13812345678</td>
                                    <td>123456</td>
                                    <td>男</td>
                                    <td>10</td>
                                    <td class="text-center">
                                        <!-- <a href="javascript:;" class="btn-style">
                                                <i class="feather-clipboard"></i></a>
                                            
                                                <a href="javascript:;" class="btn-style">
                                                <i class="feather-clipboard"></i></a>
                                                <a href="javascript:;" class="btn-style">
                                                <i class="feather-clipboard"></i></a> -->
                                        <span>重置密码</span> &nbsp;
                                        <span>换班</span>&nbsp;
                                        <span>删除</span>&nbsp;
                                    </td>

                                </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="settings-inner-blk p-1" v-show="curTab == 'contactInfo'">
                <div>
                    <div class="card review-sec">
                        <div class="card-body">
                            <h5 class="subs-title">沟通记录</h5>
                            <div class="review-item" v-for="i in 5" :key="i">
                                <div class="instructor-wrap border-0 m-0">
                                    <div class="about-instructor">
                                        <div class="abt-instructor-img">
                                            <img src="assets/img/user/user1.jpg" alt="img" class="img-fluid">
                                        </div>
                                        <div class="instructor-detail">
                                            <h5>张老师</h5>
                                            <p>2024-25-14 19:30:21</p>
                                        </div>
                                    </div>
                                </div>
                                <p class="rev-info">最近表现很好，继续加油！</p>
                            </div>
                            
                        </div>
                    </div>


                    <div class="card comment-sec">
                        <div class="card-body">
                            <h5 class="subs-title">添加沟通记录</h5>
                            <form>
                                <div class="form-group">
                                    <textarea rows="4" class="form-control" placeholder="请输入沟通内容"></textarea>
                                </div>
                                <div class="submit-section">
                                    <button class="btn submit-btn" type="submit">确定</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>

const tabs = ref([
    {
        id: "baseInfo",
        name: '基本信息'
    },
    {
        id: "courseInfo",
        name: '课程信息'
    },
    {
        id: "teacherInfo",
        name: '教师信息'
    },
    {
        id: "studentInfo",
        name: '学员信息'
    },
    {
        id: "orderInfo",
        name: '订单信息'
    },
    {
        id: "contactInfo",
        name: '备忘录'
    }
])
const curTab = ref('baseInfo')
const originTitle = ref(null)

const formData = reactive({
    id:'',
    title: 'xx机构',
    logo: '', // logo
    website: '', // 域名
    info: '最好的培训机构',
    type: 'training',
    endAt: '2025-01-01' // 截止时间
})
const principal = reactive({
    id:'',
    name: '',
    telephone: '',
    tenantID:''
})
onMounted(async () => {

    await nextTick();
    const route = useRoute()
    const id = route.query.id
    // 获取详情
    // 获取课程信息
    // 获取教师信息
    // 获取学员信息
    // 获取订单信息
    // 获取备忘录
    const data = await customApi.getDetail()
    formData.id = data.id
    formData.title = data.title
    originTitle.value = data.title
    formData.logo = data.logo
    formData.website = data.website
    principal.id = data.principal.id
    principal.telephone = data.principal.telephone
    principal.tenantID = data.principal.tenantID
    principal.name = data.principal.name
    formData.info = data.info
    formData.type = data.type
    formData.endAt = data.endAt
})
const checkFormat = () => {
    if(/^\d{4}-\d{2}-\d{2}$/.test(formData.endAt) === false){
        alert('日期格式错误')
        return false;
    }
    return true
}
const { $toast } = useNuxtApp();
const save = async () => {
    if(!checkFormat()) return;
    const route = useRoute()
    const id = formData.id
    await customApi.put(id, formData)
    if(principal.id && principal.tenantID) {
        // 之前就有校长，现在是更新
        await masterApi.put(principal.id, principal)
    }

    await masterApi.add({
        name: principal.name,
        telephone: principal.telephone,
        tenantID: id
    })
    
    
    
}
const cancel = () => {
    formData.title = originTitle.value
}
</script>

<style scoped>
.category-tab.tickets-tab-blk .nav-justified .nav-item {
    flex-basis: 120px;
}

.search-form {
    width: 400px;
}

.cur {

    background: #392C7D;
    color: #FFF;
}

table td {
    font-size: small;
}
</style>